<template>
    <div class="upload-content">
        <!-- <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> -->
        <ul class="list">
            <li v-for="(item,index) in uploadImgList" :key="index">
                <img :src="item" alt="" class="listImg"/>
                <i class="el-icon-circle-close" ref="delete" @click="deleteImg(index,uploadImgList)" :data-index="index"></i>
            </li>
        </ul>
        <div ref="upload" @click="inputFile" class="upload">
            <input type="file" accept="image/*" name="avatar" ref="inputFile" style="display: none" @change="uploadImg($event,uploadImgList)" />
            <i class="el-icon-plus"></i>
        </div>
        <div class="progressContainer" v-if="showp">
            上传进度：
            <div class="progress">
                <p :style="{width:progress+'%'}">
                </p>
                <span>正在上传<i class="el-icon-loading"></i></span>
            </div>
        <!-- <el-progress :text-inside="true" :stroke-width="18" :percentage="progress" status="success"></el-progress> -->
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data(){
        return{
            progress:0,
            showp:false
        }
    },
    watch:{
        uploadImgList(newVal,oldVal){
            // console.log(newVal,oldVal)
        }
    },
    props:['uploadImgList'],
    methods:{
        inputFile() {
            this.$refs.inputFile.click();
        },
        uploadImg(e,array) {
            let file = e.target.files;
            let that = this
            for(let i of file){
                // console.log(i)
                if(i.type != "image/jpeg" && i.type != "image/png"){
                    this.$message({
                        message: '上传图片只能是JPG或者PNG格式',
                        type: 'warning'
                    });
                    return false
                }else{
                    var image = new FormData();
                    image.append("image", i);
                }
            }
            this.$http.post(this.apiObj.upload,image,{
                 onUploadProgress(progressEvent){
                    that.showp = true
                    if (progressEvent.lengthComputable){
                        that.progress = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0));
                        console.log(that.progress)
                    }
                }
            }).then(res=>{
                if(res.status == 200){
                    that.showp = false
                    array.push(res.content.image_list[0])
                }
            })
            // axios({
            //     method: 'post',
            //     url:this.apiObj.upload,
            //     data:image,
            //     onUploadProgress(progressEvent){
            //         console.log(progressEvent)
            //     }
            // }).then(res => {
            //     if(res.status == 200){
            //         array.push(res.content.image_list[0])
            //     }
            // })
        },
        deleteImg(index,array){
            array.splice(index,1)
            console.log(array)
        },
        // 添加商品的图片
        // sendImgUrl(){
        //     this.$emit('getImg',this.uploadImgList)
        // },
    },
    mounted(){
        // console.log(this.uploadImgList)
    }
}
</script>
<style lang="scss" scoped>
    .upload-content{
        position: relative;
    }
    .progressContainer{
        z-index: 99;
        position: absolute;
        // padding-bottom:10px;
        bottom: -18px;
        left: 0;
        width: 500px;
        display: flex;
        align-items: center;
        .progress{
            position: relative;
            display: flex;
            align-items: center;
            width: 80%;
            height: 5px;
            border-radius: 10px;
            background-color: #ccc;
            p{
                width:100%;
                position: relative;
                display: flex;
                align-items: center;
                height: 5px;
                border-radius: 10px;
                background-color: #67C23A;
            }
            span{
                position: absolute;
                display: inline-block;
                width: 100px;
                padding-left: 10px;
                left: 100%;
            }
        }
        /deep/ .el-progress-bar{
            width: 100%;
        }
    }
</style>

